import React, { Component, Fragment } from 'react'
import { getSearchResult } from './store/actions'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import styles from './style.less'
import withStyle from '../../withStyle'
import cx from 'classnames'
import {changeFixed} from './store/index.js'
import { withRouter } from 'react-router'

class TopHeader extends Component {

	constructor(props) {
		super(props)
	}
	
	componentDidMount() {
		window.addEventListener('scroll', (e) => {
			if(window.scrollY > 0) {
				this.props.handleScroll(true)
			}else {
				this.props.handleScroll(false)
			}
		})
		window.addEventListener('click', (e) => {
			let target = document.getElementById('searchResult')
			if(!target) return
 			if(e.target !== target && target.contains(e.target) == false) {
				this.props.reset_search()
			}
		})
		
	}

	render() {
		// console.log(this.props.login)
		return (
			<div className={ cx(styles.topHeader, this.props.fixed ? styles.fixed : '' )}>
				<div className={ styles.flex }>
					<a className={ styles.headerIcon } onClick={() => {this.props.showSider()}}>
						<i className="iconfont icon-list"></i>
					</a>
					<div className={ cx(styles.flexCol, this.props.showTitle ? styles.showTitle : '') }>Finnwu</div>
					<div className={ styles.searchWrap} >
						{ this.props.showSearch &&  <input className={ styles.input } value={this.props.searchValue} onChange={(e) => {this.props.searchChange(e.target.value)}} type="text"/>}

						{ !this.props.showSearch &&  <i className={ cx("iconfont", "icon-search", styles.icon) } onClick={() => {this.props.show_search(true)}}></i>} 
						{ this.props.showSearch &&  <i className={ cx("iconfont", "icon-search", styles.icon)} onClick={() => {this.props.show_search(false)}} ></i>} 						
						
						{ this.props.searchResult.length > 0 && (
							<div id="searchResult" className={ styles.searchResult }>
								<ul className={ styles.searchList }>
								{ this.props.searchResult.length > 0 && this.props.searchResult.map((item) => {
									return (
										
										<a key={item._id} href={'/postArticle?id=' + item._id}>
											<li  className={styles.searchItem}>
												<div className={ styles.title }>{ item.articleTitle }</div>
												<div className={ styles.ps }>
													<span>{ item.articleTag.join('  ') }</span>
													<time>{ item.articleTime }</time>
												</div>
											</li>
										</a>
										
									)
								}) }
								</ul>
							</div>
						)}
						

					</div>
					<a className={ styles.headerIcon }>
						<i className="iconfont icon-share"></i>
					</a>
				</div>
			</div>
		)
	}
}

const mapState = (state) => ({
	fixed: state.topHeader.fixed,
	showTitle: state.topHeader.showTitle,
	searchValue: state.topHeader.searchValue,
	showSearch: state.topHeader.showSearch,
	searchResult: state.topHeader.searchResult
})


const mapDispatch = (dispatch) => ({
	handleScroll(fixed) {
		dispatch({
			type: 'change_fixed',
			value: fixed
		})
		dispatch({
			type: 'change_showText',
			value: fixed
		})
	},
	showSider() {
		dispatch({
			type: 'changeStatus',
			value: false
		})
	},
	
	searchChange(value) {
		// 去请求数据,然后改变本地的searchResult
		dispatch(getSearchResult(value))

		dispatch({
			type: 'change_searchValue',
			value: value
		})
	},
	show_search(value) {
		dispatch({
			type: 'change_showSearch',
			value: value
		})
	},
	reset_search() {
		dispatch({
			type: 'reset_result'
		})
	}


})

export default withRouter(connect(mapState, mapDispatch)(withStyle(TopHeader, styles)))